<template>
	<view class="content" style="width: 750rpx;overflow: hidden;">
		<view class="backGround" :style="{background: `url(${imgaeUrl('/static/home/slbg.png')})`}">
			<view v-bind:style="{height: (s+n) +'px'}" class="position-fixed width-100"
				style="top: 0; overflow: hidden; z-index: 9999;">
				<view class="backGround" :style="{background: `url(${imgaeUrl('/static/home/slbg.png')})`}">
					<view v-bind:style="{height: s+'px' }" />
					<view v-bind:style="{height: n+'px' }" class="display-flex center align-items">
						<view v-bind:style="{height: h+'px' }" style="width: 690rpx;"
							class=" display-flex space-between align-items">
							<view class="display-flex align-items">
								<view @click="navigateTo()" class="margin-top-05">
									<uv-icon name="arrow-left" color="#FFFFFF" size="20"></uv-icon>
								</view>
								<view style="width: 470rpx;" class="margin-left-10 input"
									@click="navigateTo('/pages/Home/search/search')">
									<view style="padding: 10rpx 24rpx;"
										class=" font-size-26 color-999 display-flex align-items">
										<uv-icon name="search" color="#999" size="18"
											class="margin-right-20"></uv-icon>请搜索商品标题
									</view>
									<!-- <uv-search bgColor="#FFFFFF" :showAction="false" disabled placeholder=""
										v-model="keyword"></uv-search> -->
								</view>
							</view>
							<view style="width: 20px;" class="margin-top-05">

							</view>
						</view>
					</view>
				</view>
			</view>
			<view :style="{height: (s+n) +'px'}">
			</view>
			<view class="" style="height: 160rpx;width: 750rpx;overflow: hidden;">
				<dyy-barrage></dyy-barrage>
			</view>
			<!--  -->
			<view class="margin-top-20">
				<scroll-view scroll-x="true" @scrolltolower="scrolltolower" class="scroll-view_H">
					<view class="" style="display: inline-block;">
						<view class="display-flex">
							<view v-for="item,index in list" :key="index" @click="tabsSwiper(index)"
								style="margin:  20rpx;" class="">
								<view class="display-flex flex-direction-column center  align-items">
									<image :src="item.icon" style="width: 112rpx;height: 112rpx;"
										class="border-radius-12" mode=""></image>
									<view :class="index == activeIndex?'tabs-active':'tabs'" class=" margin-top-10">
										{{item.title}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>

		</view>
		<view style="margin-top: -40rpx;" class="padding-about-24">
			<view class="view margin-top-20" v-for="item,index in goodslist"
				@click="navigateTo('/pages/Home/goodsDetails/goodsDetails?id=' + item.product_id)" :key="index">
				<view class="display-flex">
					<image :src="item.thumb_img" style="width: 224rpx;height: 224rpx;" class="border-radius-12" mode="">
					</image>
					<view class="file-1 display-flex flex-direction-column space-between">
						<view class="file-1 display-flex flex-direction-column space-between margin-left-20">
							<view class="font-size-28 font-weight-500 webkit-line-clamp" style="-webkit-line-clamp: 2;">
								{{item.title}}
							</view>
							<view class="display-flex  space-between align-end">
								<view class="file-1">
									<view class="margin-top-10" style="color: #FF2E38;">
										<text class="font-size-24 font-weight-bold">￥</text>
										<text class=" font-size-36 font-weight-bold">{{item.sale_price}}</text>
									</view>
									<view class="display-flex margin-top-15 align-items">
										<view style="width: 108rpx;font-size: 22rpx;height: 40rpx;"
											class="label center-size-20  color-FFF">
											{{ item.plan_type == 1?'定向高佣':'预估佣金'}}
										</view>
										<view
											style="color: #FF2E38;width: 100rpx;font-size: 22rpx; height: 40rpx;border: none;background: #FFEEEA;"
											class="label1 center-size-20">
											¥{{item.price}}
										</view>
									</view>
								</view>
								<view class="button display-flex align-items center">
									<image :src="imgaeUrl('/static/mine/liwu.png')" style="width: 30rpx;height: 30rpx;"
										mode="">
									</image>
									<view class="font-size-24 margin-left-10 font-weight-500 color-FFF">
										去送礼
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="display-flex">
					<view v-if="item.reason" class="display-flex margin-top-20 align-items">
						<image :src="imgaeUrl('/static/mine/tj.png')" style="width: 32rpx;height: 32rpx;" mode="">
						</image>
						<view class="miaos file-1 webkit-line-clamp" style="-webkit-line-clamp: 1;">
							<text style="padding: 0 20rpx;">推荐理由：{{item.reason}}</text>
						</view>
					</view>
				</view>
			</view>
			<div class="kong"></div>
			<!-- <div class="kong"></div>
			<div class="kong"></div>
			<div class="kong"></div> -->
		</view>
		<!-- <view class="position-fixed bottom transform-translate-left display-flex center align-items" style="bottom: 40rpx;left: 50%;">
			分享好友
		</view> -->
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		imgaeUrl,
		nativeUI,
		navigateTo,
		navigateBack
	} from '@/utils/index.js';
	import * as api from '@/request/app.js'; // 引入api 方法
	import local from '@/utils/localStorage.js'; //引入本地存储方法
	const s = ref(getApp().globalData.s); //计算高度
	const n = ref(getApp().globalData.n); //计算胶囊
	const h = ref(getApp().globalData.h); //计算胶囊
	const list = ref([])
	const activeIndex = ref(0)
	const page = ref(1)
	const goodslist = ref([])
	const keyword = ref('')
	onLoad(function(option) {
		giftCategory()
	});
	onShow(function() {});
	/** 切换 */
	function tabsSwiper(event) {
		console.log(event);
		activeIndex.value = event
		page.value = 1
		goodslist.value = []
		getGoodslist()
	}
	/** 获取热门视频*/
	async function getGoodslist() {
		let object = {
			page: page.value,
			gift_id: list.value[activeIndex.value].id,
			title: keyword.value,
		}
		const {
			code,
			data
		} = await api.getGoodslist(object)
		if (code == 0) {
			page.value = data.lastId
			goodslist.value = goodslist.value.concat(data.lists)
			// image: 'https://via.placeholder.com/40x60.png/EEE8AA',
			// title: '我是标题7',
			// desc: '描述描述描述描述'
		}
	}
	async function giftCategory() {
		const {
			code,
			data
		} = await api.giftCategory()
		if (code == 0) {
			list.value = data
			getGoodslist()
		}
	}
	onReady(function() {});
	onReachBottom(function() {
		getGoodslist()
	});
</script>

<style scoped lang="scss">
	.input {
		background: #FFFFFF;
		border-radius: 30rpx;
	}

	.bottom {
		width: 702rpx;
		height: 92rpx;
		background: #FFFFFF;
		border-radius: 46rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #FF2E38;
	}

	.miaos {
		height: 29rpx;
		border-radius: 0rpx 6rpx 6rpx 0rpx;
		border-top: 1rpx solid #ECCBBF;
		border-right: 1rpx solid #ECCBBF;
		border-bottom: 1rpx solid #ECCBBF;
		font-weight: 400;
		font-size: 20rpx;
		color: #B45F3E;
	}

	.button {
		width: 156rpx;
		height: 64rpx;
		background: #E02E22;
		border-radius: 12rpx;
	}

	.label1 {
		width: 68rpx;
		height: 32rpx;
		background: #FEEBEA;
		border-radius: 0rpx 6rpx 6rpx 0rpx;

	}

	.center-size-20 {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20rpx;
	}

	.label {
		width: 80rpx;
		height: 32rpx;
		background: #E02E22;
		border-radius: 6rpx 0 0 6rpx;
	}

	.view {
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 24rpx;
	}

	.tabs-active {
		color: #A70202;
		background: #FFFFFF;
	}

	.tabs {
		color: #FFFFFF;
	}

	.tabs,
	.tabs-active {
		padding: 6rpx 20rpx;
		font-weight: 500;
		font-size: 22rpx;
		border-radius: 30rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.backGround {
		width: 750rpx;
		height: 568rpx;
		background-size: 100% 100% !important;
		background-repeat: no-repeat;
	}

	.content {
		min-height: 100vh;
		background: linear-gradient(180deg, #C22D32 0%, #A70202 100%);
	}
</style>